<template>
  <div>
    <div class="addUserName" v-if="userName">
      <div class="userAdd">
        <div class="label">请输入您的姓名</div>
        <el-input v-model="name" @keyup.native.enter="addRoom" placeholder="请输入您的姓名"></el-input>
      </div>
      <div class="footer">
        <el-button type="primary" @click="addRoom('ruleForm')">加入聊天</el-button>
      </div>
    </div>
    <div class="ChatSoftware" v-if="!userName">
      <div class="chatLeft">
        <div class="header">
          <img src="../assets/logo.png" alt="">
          {{ coursename }}智能学习伙伴讨论组
        </div>
        <div class="LeftContent marTop">
          聊天室成员（{{ userList.length + 1 }}人）
        </div>
        <el-scrollbar style="height:calc(100% - 250px);" wrap-style="overflow-x:hidden;">
          <div class="userLi"><i class="el-icon-user-solid"></i>智能助手</div>
          <div class="userLi" v-for="item in userList"><i class="el-icon-user-solid"></i>{{ item }}</div>
        </el-scrollbar>
        <!-- <div class="LeftContent marTop">
        <el-button style="width:80%" type="primary" icon="el-icon-plus" @click="addDialogue">创建新对话</el-button>
      </div> -->
        <!-- <el-scrollbar style="height:calc(100% - 250px);" wrap-style="overflow-x:hidden;">
        <div :class="item[0].index == ListCheck ? 'currentSession currentCheck' : 'currentSession'"
          :style="Loading ? 'cursor: no-drop;' : ''" v-for="item in List" @click="switchIndex(item[0], Loading)">
          <p>{{ item[0].content }}</p>
          <p style="display:flex;justify-content: space-between;">{{ item[0].time }} <i style="font-size:16px" @click.stop="contentDel(item[0], Loading)"
              :style="Loading ? 'cursor: no-drop;' : ''" class="el-icon-delete"></i></p>
        </div>
      </el-scrollbar> -->
      </div>
      <div class="chatContent">
        <div class="content">
          <el-scrollbar style="height:100%;" ref="scrollbar" wrap-style="overflow-x:hidden;">
            <div class="messageList" ref="messageList" :style="'padding-bottom:' + messagePadding + 'px'">
              <div v-for="(item, index) in List" :key="item.id" ref="messageLi">
                <div class="user" v-if="item[0].role == 'user' && item[0].sender == name">
                  <div class="userContent">
                    <p style="text-align:right"><b>{{ item[0].sender }}</b></p>
                    <p style="word-break:break-all;"> {{ item[0].content }}</p>
                  </div>
                  <div class="userImg">
                    <img src="../assets/yonghu.png" alt="">
                  </div>
                </div>
                <div class="user" style="justify-content: left;" v-if="item[0].role == 'user' && item[0].sender != name">
                  <div class="userImg" style="margin: 0 10px 0 0">
                    <img src="../assets/yonghu.png" alt="">
                  </div>
                  <div class="userContent">
                    <p><b>{{ item[0].sender }}</b></p>
                    <p style="word-break:break-all;"> {{ item[0].content }}</p>
                  </div>
                </div>
                <div class="systemTips" v-if="item[0].role == 'assistant'">
                  <div class="system">
                    <div class="userImg">
                      <img src="../assets/logo.png" alt="">
                    </div>
                    <div>
                      <p><b>智能助手</b></p>
                      <div class="userContent" v-html="item[0].content"></div>
                    </div>
                  </div>
                  <div class="tips">
                    以上内容为 AI 生成，不代表开发者立场，请勿删除或修改本标记
                    <!-- <div>
                      <el-tooltip effect="dark" placement="top-start" content="点击可复制">
                        <div class="icon" @click="copyContent(item[0].content, index)">
                          <i class="el-icon-document-copy"></i>
                        </div>
                      </el-tooltip>
                    </div> -->
                  </div>
                </div>
                <div class="systemTips" v-if="Loading && index == Object.keys(List).length">
                  <div class="system">
                    <div class="userImg">
                      <img src="../assets/logo.png" alt="">
                    </div>
                    <div class="userContent">
                      <i class="el-icon-loading"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="input">
          <!-- <el-input placeholder="请输入你的需求。如需智能助手请“ @智能助手 ”发起提问。" @keyup.native.enter="sendMessage" v-model="searchInput">
          </el-input> -->
          <el-autocomplete class="inline-input" style="width:810px" v-model="searchInput" :fetch-suggestions="querySearch"
            :trigger-on-focus="false" placeholder="请输入你的需求。如需智能助手请“ @智能助手 ”发起提问。"
            @keyup.native.enter="sendMessage"></el-autocomplete>
          <div class="icon" @click="sendMessage">
            <i :class="Loading ? 'el-icon-loading' : 'el-icon-position'"></i>
          </div>
        </div>
      </div>
      <div class="recommend" v-if="1 == 2">
        <h3><img src="../assets/tubiaozhizuomoban.png" alt="">灵感大全</h3>
        <el-scrollbar style="height: calc(100% - 68px)" wrap-style="overflow-x:hidden;">
          <div class="recommend_li">
            <div v-for="item in inspiration" :key="item.id" @click="copy(item.content)">
              <h5>{{ item.title }}</h5>
              <p>{{ item.content }}</p>
              <!-- <div>
            <div class="edit">
              <el-tooltip effect="dark" placement="top-start" content="点击可复制">
                <div class="icon" @click="copy(item.content)">
                  <i class="el-icon-edit"></i>
                </div>
              </el-tooltip>
            </div>
          </div> -->
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it'
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

export default {
  name: '',
  data() {
    return {
      remoteUrl: remoteUrl,
      chatUrl: chatUrl,
      SchoolName: SchoolName,
      userName: true,
      name: '',
      searchInput: '',
      // value: `你作为一名对话AI机器人，你可以理解和回答各种问题，提供信息，帮助撰写文本，并参与有意义的对话。请在回答中力求友好、富有创意，并尽可能提供详尽、准确和有用的信息。在回答中不要使用任何外部链接。`,
      value: `你作为一名参与聊天室对话的AI机器人。`,
      List: {},
      ListCheck: '',
      listIndex: 1,
      Loading: false,
      messagePadding: 0,
      windowHeight: 0,
      inspiration: [
        {
          title: '文章创作',
          content: '请帮我写一篇教师节的公众号文章。',
        },
        {
          title: '节气推文',
          content: '作为公众号的运营人员，请就白露写一篇公众号文章。',
        },
      ],
      userList: [],
      stompClient: '',
      timer: '',
      coursename: '',
      restaurants: [{ "value": "@智能助手", "address": "@智能助手" }],
      doneBool: true,
      disabled: false
    }
  },
  mounted() {
    if (!this.$route.query.coursename || this.$route.query.coursename == '') {
      this.$router.push('/CreateChatRoom')
    }
    this.coursename = this.$route.query.coursename
    this.windowHeight = window.innerHeight
  },
  beforeDestroy: function () {
    // 页面离开时断开连接,清除定时器
    this.disconnect();
    clearInterval(this.timer);
  },
  methods: {
    stopChat() {
      this.doneBool = true
      this.Loading = false
    },
    initWebSocket() {
      this.connection();
      let that = this;
      // 断开重连机制,尝试发送消息,捕获异常发生时重连
      this.timer = setInterval(() => {
        try {
          that.stompClient.send("test");
        } catch (err) {
          that.connection();
        }
      }, 5000);
    },
    connection() {
      // 建立连接对象
      let socket = new SockJS(this.remoteUrl + '/ws');
      // 获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(socket);
      // 定义客户端的认证信息,按需求配置
      let headers = {}
      // let headers = {
      //   Authorization: ''
      // }
      // 向服务器发起websocket连接
      let _this = this
      this.stompClient.connect(headers, () => {
        this.stompClient.subscribe('/topic/public/' + this.coursename, (msg) => { // 订阅服务端提供的某个topic
          let data = JSON.parse(msg.body)
          if ((data.type && data.type == 'JOIN') || (data.type && data.type == 'LEAVE')) {
            this.userList = data.content
          }
          if (data.type && data.type != 'JOIN' && data.type != 'LEAVE') {
            data.content ? _this.$set(_this.List, _this.listIndex, [
              {
                role: data.sender == 'ManualAssistant' ? 'assistant' : 'user',
                content: data.content,
                index: _this.listIndex,
                sender: data.sender
              }
            ]) : null
            console.log(data)
            if (data.sender == 'ManualAssistant' && data.content) {
              _this.disabled = true
            } else {
              _this.listIndex++;
              _this.disabled = false
            }
            setTimeout(() => {
              _this.toScrollTop()
            }, 0);
          }
        }, headers);
        setTimeout(() => {
          this.stompClient.send("/app/chat.addUser",
            headers,
            JSON.stringify({
              sender: this.name, chatType: 'JOIN', content: '',
              coursename: this.coursename,
            }),
          )   //用户加入接口
        }, 0);
      }, (err) => {
        // 连接发生错误时的处理函数
      });
    },    //连接 后台
    disconnect() {
      if (this.stompClient) {
        // this.stompClient.send("/app/chat.delUser",
        //   headers,
        //   JSON.stringify({ sender: this.name, chatType: 'LEAVE', content: '' }),
        // )   //用户加入接口
        this.stompClient.disconnect();
      }
    },  // 断开连接
    addRoom() {
      if (!this.name || this.name == '') {
        this.$message.warning('姓名不能为空！')
      } else {
        this.userName = false
        this.initWebSocket();
      }
    },
    copy(content) {
      this.searchInput = content
    },
    selectChange() {
      this.List = {}
      this.ListCheck = ''
      this.listIndex = 1
    },
    addDialogue() {
      if (this.Loading) {
        this.$message.warning('当前对话生成中！')
        return false;
      }
      if (this.ListCheck == '') {
        this.$message.warning('已切换最新会话！')
        return false;
      }
      this.ListCheck = ''
    },
    switchIndex(item) {
      if (this.Loading) return false;
      this.ListCheck = item.index
      this.messagePadding = item.messagePadding
      setTimeout(() => {
        this.toScrollTop(item.toScrollTopPX)
      }, 0);
    },
    sendMessage() {
      if (this.searchInput.indexOf('@智能助手') > -1 && this.disabled) {
        this.$message.warning('当前对话生成中！')
        return false;
      }
      if (this.searchInput.indexOf('@智能助手') > -1 && this.Loading) {
        this.$message.warning('当前对话生成中！')
        return false;
      }
      if (this.Loading) return false;
      if (!this.searchInput || this.searchInput == '') {
        this.$message.warning('发送内容不能为空！')
        return false
      };
      if (this.searchInput.trim() == '') {
        this.$message.warning('发送内容不能为空！')
        return false;
      }
      this.searchInput = this.searchInput.trim()
      let isHidden = false
      this.searchInput.indexOf('@智能助手') > -1 ? isHidden = true : isHidden = false
      let listIndex = this.listIndex
      // let time = this.currentTime()
      let obj = {
        role: 'user',
        content: this.searchInput,
        index: listIndex,
        type: 'CHAT',
        sender: this.name,
        coursename: this.coursename,
      }
      this.searchInput = ''
      this.stompClient.send("/app/chat.sendMessage",
        {},
        JSON.stringify(obj),
      )
      setTimeout(async () => {
        let array = JSON.parse(JSON.stringify(this.List))
        let listArr = []
        for (const key in array) {
          if (array[key] && array[key][0]) {
            if (array[key][0].content.indexOf('@智能助手') > -1) {
              var reg1 = new RegExp("@智能助手", "g"); // 加'g'，删除字符串里所有的"@智能助手"
              array[key][0].content = array[key][0].content.replace(reg1, "");
            }
            listArr.push(array[key][0])
          }
        }
        if (isHidden) {
          this.Loading = true
          setTimeout(() => {
            this.toScrollTop()
          }, 0);
          if (listArr.length > 20) {
            let arr = JSON.parse(JSON.stringify(listArr))
            let arr2 = arr.slice(-20)
            if (arr2[0].role == 'assistant') {
              arr2 = arr.slice(-21)
            }
            listArr = arr2
          }
          let messageArr = []
          let str = ''
          listArr.forEach(item => {
            if (item.role == 'user') {
              str += '{' + item.sender + '}:{' + item.content + '};'
            } else {
              messageArr.push({
                content: str,
                role: 'user'
              })
              messageArr.push({
                content: item.content,
                role: 'assistant'
              })
              str = ''
            }
          })
          messageArr.push({
            str: str,
            role: 'user',
            content: str,
          })
          str = ''
          messageArr.forEach(item => {
            if (item.role == 'user') {
              // item.content = '聊天参与方产生了如下对话（格式为{用户}:{内容};）：{' + item.content + '}' + (listArr[listArr.length - 1].content == '' ?
              //   '理解上述对话,请做出合适的回应。' : ('理解上述对话并根据对你的提示内容{' + listArr[listArr.length - 1].content + '}做出回答。'))
              item.content = '总结一下对话内容，给出建议和进一步讨论的内容，' + (listArr[listArr.length - 1].content == '' ? '' : '{' + listArr[listArr.length - 1].content + '}。') +
                '对话如下：{' + item.content + '}'
            }
          })
          let UserMessages = [{
            "role": "system",
            "content": this.value,
          }, ...messageArr]
          // , {
          //   role: 'user',
          //   content: '聊天参与方产生了如下对话（格式为{用户}:{内容};）：' + string +
          //     (listArr[listArr.length - 1].content == '' ? '理解上述对话,请做出合适的回应。' : ('理解上述对话并根据对你的提示内容{' + listArr[listArr.length - 1].content + '}做出回答。'))
          // }

          const controller = new AbortController();
          const signal = controller.signal;

          const response = await fetch(this.chatUrl + '/chat/completions', {
            method: "POST",
            signal,
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              model: "chatglm2-6b",
              messages: UserMessages,
              stream: true,
              temperature: 1,
            }),
          });
          const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
          var { value, done } = await reader.read();
          let message = {
            "role": "assistant",
            "content": ""
          }
          let output = ''
          while (true) {
            var { value, done } = await reader.read();
            if (done) {
              setTimeout(() => {
                message.content = null
                message.type = 'CHAT'
                message.sender = 'ManualAssistant'
                message.coursename = this.coursename
                this.stompClient.send("/app/chat.sendMessage",
                  {},
                  JSON.stringify(message),
                )
                controller.abort();
              }, 10);
              break
            };
            value = value.replace('undefined', '')
            try {
              let obj = JSON.parse(value.substring(6)).choices[0].delta.content
              if (!obj) return false;
              output += obj
            } catch (error) {

            }
            this.Loading = false
            const md = new MarkdownIt()
            message.content = md.render(output)
            message.type = 'CHAT'
            message.sender = 'ManualAssistant'
            message.coursename = this.coursename
            this.stompClient.send("/app/chat.sendMessage",
              {},
              JSON.stringify(message),
            )
            // this.toScrollTop()
            // if (this.List[listIndex][this.List[listIndex].length - 1].role == "assistant") {
            //   this.$set(this.List[listIndex][this.List[listIndex].length - 1], 'content', output)
            //   let list = this.List
            //   this.List = {}
            //   this.List = list
            // } else {
            //   this.List[listIndex].push(message)
            // }
            // this.CalculateHeight(false)
          }
          return
          this.axios.post(this.chatUrl + '/chat/completions',
            {
              model: "chatglm2-6b",
              messages: messages,
            },
            {
              headers: {
                'Authorization': 'Bearer none',
                'Content-Type': 'application/json'
              }
            }).then(res => {
              this.Loading = false
              let content = res.data.choices[0].message
              const md = new MarkdownIt()
              content.content = md.render(content.content)
              content.type = 'CHAT'
              content.sender = 'ManualAssistant'
              this.stompClient.send("/app/chat.sendMessage",
                {},
                JSON.stringify(content),
              )
              this.toScrollTop()
            }).catch(() => {
              this.Loading = false
              this.$message.error('服务器错误，请稍后重试。')
            })

        }
      }, 50);
    },
    toScrollTop(number) {
      const el = this.$refs['scrollbar'].wrap;
      el.scrollTop = el.scrollHeight;
    },
    copyContent(item, index) {
      const save = function (e) {
        e.clipboardData.setData('text/plain', item)
        e.preventDefault() // 阻止默认行为
      }
      document.addEventListener('copy', save) // 添加一个copy事件
      document.execCommand('copy')
      this.$message.success('复制成功。')
    },
    contentDel(item) {
      let ListCheck = this.ListCheck
      if (this.Loading) return false;
      delete this.List[item.index]
      this.ListCheck = 'aaa'
      this.ListCheck = ListCheck == item.index ? '' : ListCheck
      this.$message.success('删除成功。')
    },
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      var strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
      //此处可以拿外部的变量接收  strDate:2022-05-01 13:25:30
      //this.date = strDate;
      return strDate
    },
    CalculateHeight(bool) {
      let height = this.windowHeight - 110
      if (bool) {
        setTimeout(() => {
          let messageListPX = this.$refs.messageList.offsetHeight - this.messagePadding
          let LoadingHeight = this.$refs.messageLi[this.$refs.messageLi.length - 1].offsetHeight
          let maxHeight = height - LoadingHeight
          let toScrollTopPX = messageListPX - LoadingHeight
          this.messagePadding = (height - messageListPX) > 0 ?
            (height - messageListPX) : 0
          this.ListCheck && this.List[this.ListCheck].length > 2 ? this.messagePadding += toScrollTopPX : null
          this.messagePadding > maxHeight ? this.messagePadding = maxHeight : null
          this.List[this.ListCheck][0].messagePadding = this.messagePadding
          setTimeout(() => {
            this.toScrollTop(toScrollTopPX)
            this.List[this.ListCheck][0].toScrollTopPX = toScrollTopPX
          }, 0);
        }, 0);
      } else {
        setTimeout(() => {
          let liHeight = this.$refs.messageLi[this.$refs.messageLi.length - 1].offsetHeight +
            this.$refs.messageLi[this.$refs.messageLi.length - 2].offsetHeight
          this.messagePadding = (height - liHeight) > 0 ? (height - liHeight) : 0
          this.List[this.ListCheck][0].messagePadding = this.messagePadding
          setTimeout(() => {
            this.toScrollTop(this.$refs.messageList.offsetHeight)
            this.List[this.ListCheck][0].toScrollTopPX = this.$refs.messageList.offsetHeight
          }, 0);
        }, 0);
      }
    },
    querySearch(queryString, cb) {
      // if (this.searchInput == '') {
      //   return false;
      // }
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
  }
}

</script>
<style lang="scss" scoped>
.messageList {
  overflow: hidden;
}

.content>>>.el-scrollbar__bar {
  display: none;
}

.chatContent>>>.el-input__inner {
  height: 60px !important;
  border-radius: 10px !important;
  padding: 0 55px 0 15px !important;
}

.ChatSoftware {
  display: flex;
  justify-content: space-between;
  background-color: #f6f7f9;
  height: 100vh;

  .chatContent {
    width: calc(100% - 250px);
    height: 100%;
    text-align: center;

    .content {
      width: 810px;
      margin: 0 auto;
      height: calc(100% - 110px);
      font-size: 15px;
      text-align: left;
      line-height: 30px;

      .user,
      .system {
        display: flex;
        justify-content: right;
        padding: 20px;

        .userContent {
          max-width: 720px;
        }

        .userImg {
          width: 35px;
          height: 35px;
          margin-left: 10px;
          border-radius: 35px;

          img {
            height: 100%;
            width: 100%;
          }
        }
      }

      .systemTips {
        background-color: #ffffff;
        border-radius: 8px;
        padding-bottom: 20px;

        .tips {
          padding: 0 20px 0 65px;
          font-size: 14px;
          color: #b0b7c0;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .icon {
            height: 40px;
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            &:hover {
              background-color: #f2f5ff;
              color: #409eff;
              border-radius: 8px;
            }
          }
        }
      }

      .system {
        justify-content: left;
        background-color: #ffffff;
        padding-bottom: 0;

        .userImg {
          margin-left: 0px;
          margin-right: 10px;
        }
      }
    }

    .input {
      width: 810px;
      margin: 0 auto;
      height: 100px;
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .icon {
        position: absolute;
        height: 40px;
        width: 40px;
        background-color: #f2f5ff;
        right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        cursor: pointer;

        &:hover {
          background-color: #e4eaff;
          color: #409eff;
        }
      }
    }
  }

  .chatLeft {
    width: 259px;
    background-color: #ffffff;
    height: 100%;
    border-right: 1px solid #d7d7d7;

    .header {
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;

      img {
        height: 40px;
        width: 40px;
        margin-right: 10px;
      }
    }

    .marTop {
      margin-top: 30px;
    }

    .LeftContent {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
    }

    .currentSession {
      padding: 20px;
      font-size: 12px;
      height: 40px;
      border-left: 3px solid #ffffff;
      cursor: pointer;

      p {
        height: 20px;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;

        i:hover {
          cursor: pointer;
          color: red;
        }
      }
    }

    .currentCheck {
      border-left: 3px solid #3e6ffb;
      background-color: #f8f8f8;
    }
  }
}

.recommend {
  width: 480px;
  padding: 10px;
  background-color: #ffffff;

  h3 {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    img {
      height: 28px;
      width: 28px;
    }
  }

  .recommend_li {
    cursor: pointer;

    >div {
      float: left;
      width: 215px;
      height: 75px;
      border-radius: 5px;
      background-color: #f4fafc;
      margin-bottom: 10px;
      padding: 10px;

      >div {
        display: flex;
        align-items: center;
        justify-content: right;
        margin-top: 3px;

        .edit {
          height: 25px;
          width: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .edit:hover {
          background-color: #ffffff;
          border-radius: 8px;
          color: red;
          cursor: pointer;
          box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        }
      }

      h5 {
        font-size: 14px;
      }

      p {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }
    }
  }

  .recommend_li>div:nth-child(2n - 1) {
    margin-right: 10px;
  }
}

.userLi {
  height: 35px;
  line-height: 35px;
  padding: 0 30px;

  .el-icon-user-solid {
    color: #5cb6ff;
    margin-right: 5px;
  }
}

.addUserName {
  width: 600px;
  margin: 30px auto;
  padding: 50px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .2);

  .userAdd {
    display: flex;
    align-items: center;

    >.label {
      width: 200px;
    }

    el-input {
      flex: 1;
    }
  }

  .footer {
    margin-top: 30px;
    text-align: center;
  }
}

>>>pre {
  background-color: #f5f2f2 !important;
  padding: 10px;
  border-radius: 3px;
  white-space: inherit;
  white-space: pre-wrap !important;
}
</style>